import React, {PureComponent} from 'react';

/* 
 1. 只要执行setState(),即使不改变状态数据, 组件也会重新render()
 2. 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低

 办法1: 
		重写shouldComponentUpdate()方法
		比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
	办法2:  
		使用PureComponent
		PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
		注意: 
			只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
			不要直接修改state数据, 而是要产生新数据
	项目中一般使用PureComponent来优化

*/

export default class A extends PureComponent {
	state = {carName: '迈巴赫'};

	changeCar = () => {
		this.setState({carName: '脑斯莱斯'});
	};

	render() {
		return (
			<div>
				<h1>我是a组件</h1>
				<h3>我有一辆车叫:{this.state.carName}</h3>
				<button onClick={this.changeCar}>换车</button>
				<B carName={this.state.carName}></B>
			</div>
		);
	}
}

class B extends PureComponent {
	render() {
		return (
			<div>
				<h1>我是b组件</h1>
				<h3>我爸爸有辆车叫:{this.props.carName}</h3>
			</div>
		);
	}
}
